<template>
  <div class="finance-pay">
      <Table
        :columns="columns"
        :data="list"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  import financeApi from '@/api/finance'

  export default {
    name: 'finance-pay',
    data () {
      return {
        query: {
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '活动名称',
            key: 'actName',
            align: 'center'
          },
          {
            title: '组别',
            key: 'groupName',
            align: 'center'
          },
          {
            title: '姓名',
            width: 80,
            key: 'realName',
            align: 'center'
          },
          {
            title: '支付人',
            width: 80,
            key: 'payRealName',
            align: 'center'
          },
          {
            title: '支付金额',
            width: 80,
            key: 'payMoney',
            align: 'center'
          },
          {
            title: '订单号',
            width: 180,
            key: 'orderNo',
            align: 'center'
          },
          {
            title: '支付方式',
            width: 80,
            key: 'payWayName',
            align: 'center'
          },
          {
            title: '支付时间',
            width: 160,
            key: 'payTime',
            render: (h, params) => {
              let { row } = params
              return row.payTime ? moment(row.payTime).format('YYYY-MM-DD HH:mm:ss') : '-'
            },
            align: 'center'
          },
          {
            title: '状态',
            width: 80,
            key: 'payStatusName',
            align: 'center'
          }
        ],
        list: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async getList () {
        this.query.pkRclubInfo = this.userInfo.pkRclubInfo
        const { body } = await financeApi.getPayDetailList(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>
